/* 首页顶部 */
.education {
    width: 100%;
}

.top_img img {
    width: 100%;
    height: 79px;
}

.top_nav {
    height: 72px;
    /* background-color: pink; */
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0px -11px 48px #000;
}

.top_nav_left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    position: relative;
}

.top_nav_left div {
    margin-right: 20px;
}

.top_nav_left input {
    border-bottom: 1px solid #000;
}

.sousuo {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 24px;
    right: -1px;
}

.top_nav_left img {
    width: 116px;
    height: 58px;
}


.top_nav_right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.top_nav_right div {
    margin-right: 20px;
}

.vip {
    width: 16px;
    height: 16px;
    margin-right: 20px;
}

.nav_touxiang {
    width: 50px;
    height: 50px;
}




/* 首页轮播图 */

.xiangyou {
    width: 20px;
    height: 20px;
}

.banner_right img {
    width: 800px;
    height: 450px;

}

.banner {
    margin: 40px auto 0;
    display: flex;
    width: 1000px;
    height: 450px;
    border-radius: 10px;
    box-shadow: 0 12px 24px 0 rgb(7 17 27 / 60%);
    overflow: hidden;
}

.banner_left {
    /* background-color: skyblue; */
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.banner_right {
    /* background-color: pink; */
    flex: 8;
}

.banner_left_soft {
    height: 60px;
    font-size: 12px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 热门课程 */
.hot {
    margin: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hot_title {
    width: 160px;
    margin-bottom: 20px;
    text-align: center;
}

.hot_title_top {
    font-size: 20px;
    height: 28px;
    border-bottom: 2px solid red;
}

.hot_title_bottom {
    font-size: 14px;
}

.hot_course {
    /* flex: 1; */
    width: 1000px;
    display: flex;
    justify-content: space-between;
    /* 多个项目折行 */
    flex-wrap: wrap;
    align-content: space-between;
}

.hot_course_kc {
    width: 220px;
    height: 300px;
    overflow: hidden;
}


.kc_img img {
    width: 220px;
    height: 182px;
}


/* 点击图片放大 */
.kc_img img:hover {
    transform: scale(1.1);
    transition: 0.5s ease;
}

.kc_item {
    padding: 10px;
    font-size: 14px;
    background-color: rgb(240, 238, 238);
}


.huo {
    width: 16px;
    height: 16px;
}


.kc_item_jibie {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.kc_item_number {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kc_item_number_right .left {
    font-size: 12px;
    text-decoration: line-through;
    margin-right: 5px;
}

.hot_course_kc:hover {
    color: red;
}

/* 间隔 */
.split_line {
    height: 100px;
    background-color: rgb(251, 250, 250);
    /* background-color: white; */

}


/* 最新课程 */
.new {
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgb(7 17 27 / 20%);
}

.new_course_left {
    /* flex: 1; */
    width: 680px;
    display: flex;
    justify-content: space-between;
    /* 多个项目折行 */
    flex-wrap: wrap;
    align-content: space-between;
}

.new_course {
    /* background-color: pink; */
    height: 638px;
}



.new_course_right {
    width: 320px;
    /* background-color: skyblue; */
}

.new_course {
    width: 1000px;
    display: flex;
    justify-content: space-between;
    /* 多个项目折行 */
    flex-wrap: wrap;
    align-content: space-between;
}


.new_course_right img {
    width: 300px;
    height: 638px;
    margin-left: 20px;
}


/* 首页底部制作 */

.foot {
    width: 432px;
    padding: 50px 0;
    margin: 0 auto;
    /* background-color: pink; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon_item {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

.foot_center {
    display: flex;
    justify-content: center;
    /* background-color: skyblue; */
    width: 100%;
    border-bottom: 1px solid #000;
    margin: 5px 0;
}

.foot_center div {
    margin-right: 10px;
}


/* 结束
1、CSS布局建议直接用flex布局，方便 display:flex;
2、若要实现整个模块水平居中，使用margin:0 auto; 且需要给盒子设置宽度
3、调整每个模块间的距离时，给上下加宽度，可以是padding、margin

*/
